<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选和不选</title>
</head>
<body>
    <!--  1.实现全选，不选，反选
`num.checked = true选中   num.checked = false不选` -->
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button>
    <div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </div>
    <script>
        var btn=document.getElementsByTagName('button');
        // 获取button按钮的内容,并且循环绑定点击事件
        var inputs=document.getElementsByTagName('input');
        // 获取复选框
        for(var j=0;j<btn.length;j++){
            //通过循环绑定点击事件
            btn[j].onclick=function(){
                if(this.innerHTML==='全选'){
                    // 循环着给每个input添加checke=true;
                    for(var j=0;j<inputs.length;j++){
                        inputs[j].checked=true;
                    }
                }else if(this.innerHTML==='反选'){
                    // 去除已选择的，勾上未选择的
                    for(var j=0;j<inputs.length;j++){
                        inputs[j].checked=!inputs[j].checked;
                    }
                }else if(this.innerHTML==='全不选'){
                    // 循环把每个input框的checked状态改变为false
                    for(var j=0; j<inputs.length;j++){
                    inputs[j].checked=false;
                    }
                }
          
            } 


        }

    </script>
</body>
</html>